<style lang="less" scoped>
.find{
	width: 100%;
	overflow: hidden;
	.category{
		width: 100%;
		top: 55px;
		background-color:#fefefe;
		overflow: scroll;
		position: fixed;
		padding: 5px 5px;
		z-index: 100;
		.list{
			width: 100%;
			display: flex;
			justify-content: space-around;
			background-color:#fefefe;
			li{
				
				margin: 0 5px;
				display: flex;
				flex-shrink: 0;
				border-radius: 20px;
				
				padding: 5px 15px;
			}
			li.active{
				background-color: #eee;
			}
		}
	}
	.category::-webkit-scrollbar {
				display: none;
			}
	.playList{
		width: 100%;
		height: 80%;
		box-shadow: 0px 0px 2px 1px #aaa;
		margin-top: 100px;
		overflow: scroll;
		.container{
			width: 94%;
			margin: 0 auto;
			ul{
				
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.item{
					flex-shrink: 0;
					
					width: 31%;
					position: relative;
					margin-top: 20px;
					.bj{
						width: 100%;
						margin: 0 auto;
						img {
							width: 100%;
							border-radius: 6px;
						}
					}
					
					.icon {
						position: absolute;
						width: 24%;
						top: 75px;
						right: 5px;
					
						img {
							width: 100%;
						}
					}
					
					.mask {
						// position: absolute;
						margin-top: 8px;
						width: 100%;
						font-size: 12px;
						// bottom: 0;
						// background-color: white;
					}
					
					.playCount {
						position: absolute;
						top: 5px;
						left: 10px;
						// background-color: aqua;
						font-size: 14px;
						color: white;
					}
				}
			}
		}
	}
	.playList::-webkit-scrollbar {
				display: none;
			}
}
</style>
<template>
	<view class="find">
		<find-top></find-top>
		<div class="loading" v-if="isLoading" style="position: absolute; top: 40%;left:30%;z-index: 1200;">
			<loading></loading>
		</div>
		<div class="category">
			<ul class="list">
				<li v-for="(item,index) in category" @click="tap(index)" :class="index==tagIndex?'active':''">
					<div class="tag">
						<span>{{item.name}}</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="playList">
			<div class="container">
				<ul>
					<li class="item" v-for="(item,index) in playlist">
						<div class="bj" @click="toList(item.id)">
							<img :src=item.picUrl alt="" />
						</div>
						<div class="icon">
							<img src="../../static/playWite.png" alt="" />
						</div>
						<div class="mask">
							<span>{{item.name}}</span>
						</div>
						<div class="playCount" v-if="item.playCount != undefined">
							<span><uni-icons type="headphones" size="20" color="white"></uni-icons>{{item.playCount}}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</view>
</template>

<script>
	import { getTags } from '../../api/request'
	import { getHighPlaylist } from '../../api/request'
	import loading from '../../components/loading.vue'
	import findTop from '../../components/findTop.vue'
	export default {
		components:{
			findTop,
			loading
		},
		data() {
			return {
				category:[],
				tagIndex:0,
				tag:'',
				playlist:[],
				isLoading:false,
			}
		},
		async onLoad(){
			await this.getTagsFn()
			await this.getHighPlaylistFn(this.tag)
		},
		methods: {
			async getTagsFn(){
				this.isLoading=true
				await getTags()
				.then(
				(data)=>{
					let {tags}=data
					this.category=tags
					this.tag=tags[0].name
				})
			},
			async getHighPlaylistFn(cat){
				this.isLoading=true
				await getHighPlaylist({cat})
				.then(
				(data)=>{
					let {playlists}=data
					let newArr=playlists.map(item=>{
						let obj={}
						obj.name=item.name
						obj.id=item.id
						obj.picUrl = item.coverImgUrl;
						let playCount = item.playCount.toString()
						if (playCount.length > 4 && playCount.length < 9) {
							obj.playCount = playCount.substring(0, playCount.length - 4) + "万";
						} else if (playCount.length >= 9) {
							obj.playCount = playCount.substring(0, playCount.length - 8) + "亿";
						} else {
							obj.playCount = playCount
						}
						return obj
					})
					this.playlist=newArr
				})
				this.isLoading=false
			},
			tap(index){
				this.tagIndex=index
				this.tag=this.category[index].name
				this.getHighPlaylistFn(this.tag)
			},
			toList(id) {
				uni.navigateTo({
					url: "/pages/meau/meau?id=" + id
				})
			},
		}
	}
</script>


